import {QuestionParagraphPropsType} from "./interface";
import {Checkbox, Form, Input} from "antd";
import {useEffect} from "react";

export const PropComponent = (props: QuestionParagraphPropsType) => {
    const {TextArea} = Input
    const {text, isCenter, onChange, disable} = props
    const [form] = Form.useForm()

    useEffect(() => {
        form.setFieldsValue({text, isCenter})
    }, [text, isCenter]);

    function handleValuesChange() {
        if (onChange) {
            onChange(form.getFieldsValue())
        }
    }

    return (
        <Form form={form} layout={'vertical'} initialValues={{text, isCenter}} disabled={disable}
              onValuesChange={handleValuesChange}>
            <Form.Item label={'段落内容'} name={'text'} rules={[{required: true, message: '请输入段落内容'}]}>
                <TextArea></TextArea>
            </Form.Item>
            <Form.Item name={'isCenter'} valuePropName="checked">
                <Checkbox>居中显示</Checkbox>
            </Form.Item>
        </Form>
    );
};